<template>
  <div class="project-statistics">
    <div class="page-header">
      <h1>项目统计</h1>
      <p>众筹项目数据分析和统计</p>
    </div>
    
    <!-- 统计卡片 -->
    <el-row :gutter="24" class="stats-grid">
      <el-col :xs="24" :sm="12" :md="6" v-for="stat in statsData" :key="stat.key">
        <el-card class="stat-card" shadow="hover">
          <div class="stat-content">
            <div class="stat-icon" :class="stat.iconClass">
              <el-icon :size="24">
                <component :is="stat.icon" />
              </el-icon>
            </div>
            <div class="stat-info">
              <h3>{{ stat.value }}</h3>
              <p>{{ stat.label }}</p>
              <span class="stat-change" :class="stat.trend">
                {{ stat.change }}
              </span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <!-- 图表区域 -->
    <el-row :gutter="24" class="charts-grid">
      <el-col :xs="24" :lg="12">
        <el-card class="chart-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <span>项目分类分布</span>
              <el-select v-model="categoryChartType" size="small" style="width: 120px">
                <el-option label="按数量" value="count" />
                <el-option label="按金额" value="amount" />
              </el-select>
            </div>
          </template>
          <div class="chart-container">
            <div class="pie-chart">
              <div class="pie-segment" style="--percentage: 35; --color: #667eea;">
                <span class="segment-label">科技 35%</span>
              </div>
              <div class="pie-segment" style="--percentage: 25; --color: #43e97b;">
                <span class="segment-label">设计 25%</span>
              </div>
              <div class="pie-segment" style="--percentage: 20; --color: #f093fb;">
                <span class="segment-label">美食 20%</span>
              </div>
              <div class="pie-segment" style="--percentage: 20; --color: #4facfe;">
                <span class="segment-label">艺术 20%</span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :xs="24" :lg="12">
        <el-card class="chart-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <span>项目成功率趋势</span>
              <el-select v-model="successChartType" size="small" style="width: 120px">
                <el-option label="近6个月" value="6months" />
                <el-option label="近12个月" value="12months" />
              </el-select>
            </div>
          </template>
          <div class="chart-container">
            <div class="line-chart">
              <svg width="100%" height="200" viewBox="0 0 400 200">
                <path 
                  d="M0,150 L50,120 L100,100 L150,80 L200,60 L250,50 L300,40 L350,30 L400,25" 
                  stroke="#667eea" 
                  stroke-width="3" 
                  fill="none"
                />
                <path 
                  d="M0,150 L50,120 L100,100 L150,80 L200,60 L250,50 L300,40 L350,30 L400,25 L400,200 L0,200 Z" 
                  fill="url(#gradient)" 
                  opacity="0.3"
                />
                <defs>
                  <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
                    <stop offset="0%" style="stop-color:#667eea;stop-opacity:1" />
                    <stop offset="100%" style="stop-color:#667eea;stop-opacity:0" />
                  </linearGradient>
                </defs>
              </svg>
            </div>
            <p class="chart-label">成功率变化趋势</p>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <!-- 数据表格 -->
    <el-card class="table-card" shadow="hover">
      <template #header>
        <div class="card-header">
          <span>项目详细数据</span>
          <el-button type="primary" size="small" @click="exportData">
            <el-icon><Download /></el-icon>
            导出数据
          </el-button>
        </div>
      </template>
      
      <el-table :data="tableData" style="width: 100%" v-loading="loading">
        <el-table-column label="分类" prop="category" width="120" />
        <el-table-column label="项目数量" prop="count" width="120" align="center" />
        <el-table-column label="成功项目" prop="successCount" width="120" align="center" />
        <el-table-column label="成功率" width="120" align="center">
          <template #default="{ row }">
            <el-progress 
              :percentage="row.successRate" 
              :color="getProgressColor(row.successRate)"
              :stroke-width="8"
            />
          </template>
        </el-table-column>
        <el-table-column label="总筹资金额" prop="totalAmount" width="150" align="center">
          <template #default="{ row }">
            ¥{{ formatNumber(row.totalAmount) }}
          </template>
        </el-table-column>
        <el-table-column label="平均目标金额" prop="avgTarget" width="150" align="center">
          <template #default="{ row }">
            ¥{{ formatNumber(row.avgTarget) }}
          </template>
        </el-table-column>
        <el-table-column label="平均筹资金额" prop="avgRaised" width="150" align="center">
          <template #default="{ row }">
            ¥{{ formatNumber(row.avgRaised) }}
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { 
  Document, 
  SuccessFilled, 
  Money, 
  TrendCharts,
  Download
} from '@element-plus/icons-vue'

const loading = ref(false)
const categoryChartType = ref('count')
const successChartType = ref('6months')

// 统计数据
const statsData = reactive([
  {
    key: 'total',
    label: '总项目数',
    value: 156,
    change: '+12% 本月',
    trend: 'positive',
    icon: Document,
    iconClass: 'total-icon'
  },
  {
    key: 'success',
    label: '成功项目',
    value: 122,
    change: '+8% 本月',
    trend: 'positive',
    icon: SuccessFilled,
    iconClass: 'success-icon'
  },
  {
    key: 'rate',
    label: '成功率',
    value: '78%',
    change: '+3% 本月',
    trend: 'positive',
    icon: TrendCharts,
    iconClass: 'rate-icon'
  },
  {
    key: 'amount',
    label: '总筹资金额',
    value: '¥2,847,500',
    change: '+15% 本月',
    trend: 'positive',
    icon: Money,
    iconClass: 'amount-icon'
  }
])

// 表格数据
const tableData = ref([
  {
    category: '科技',
    count: 55,
    successCount: 45,
    successRate: 82,
    totalAmount: 1250000,
    avgTarget: 45000,
    avgRaised: 38000
  },
  {
    category: '设计',
    count: 39,
    successCount: 32,
    successRate: 82,
    totalAmount: 890000,
    avgTarget: 35000,
    avgRaised: 28000
  },
  {
    category: '美食',
    count: 31,
    successCount: 24,
    successRate: 77,
    totalAmount: 420000,
    avgTarget: 25000,
    avgRaised: 19000
  },
  {
    category: '艺术',
    count: 31,
    successCount: 21,
    successRate: 68,
    totalAmount: 287500,
    avgTarget: 30000,
    avgRaised: 20000
  }
])

// 方法
const formatNumber = (num) => {
  return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
}

const getProgressColor = (percentage) => {
  if (percentage >= 80) return '#67c23a'
  if (percentage >= 60) return '#409eff'
  if (percentage >= 40) return '#e6a23c'
  return '#f56c6c'
}

const exportData = () => {
  ElMessage.success('数据导出功能开发中...')
}

onMounted(() => {
  // 可以在这里调用API获取统计数据
  console.log('项目统计页面已加载')
})
</script>

<style scoped>
.project-statistics {
  max-width: 1200px;
  margin: 0 auto;
}

.page-header {
  margin-bottom: 32px;
}

.page-header h1 {
  font-size: 28px;
  font-weight: 700;
  color: #333;
  margin-bottom: 8px;
}

.page-header p {
  color: #666;
  font-size: 16px;
}

.stats-grid {
  margin-bottom: 32px;
}

.stat-card {
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-4px);
}

.stat-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.total-icon {
  background: linear-gradient(135deg, #667eea, #764ba2);
}

.success-icon {
  background: linear-gradient(135deg, #43e97b, #38f9d7);
}

.rate-icon {
  background: linear-gradient(135deg, #4facfe, #00f2fe);
}

.amount-icon {
  background: linear-gradient(135deg, #f093fb, #f5576c);
}

.stat-info h3 {
  font-size: 28px;
  font-weight: 700;
  color: #333;
  margin: 0 0 4px 0;
}

.stat-info p {
  color: #666;
  font-size: 14px;
  margin: 0 0 8px 0;
}

.stat-change {
  font-size: 12px;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: 6px;
}

.stat-change.positive {
  background: rgba(76, 175, 80, 0.1);
  color: #4caf50;
}

.stat-change.negative {
  background: rgba(244, 67, 54, 0.1);
  color: #f44336;
}

.charts-grid {
  margin-bottom: 32px;
}

.chart-card {
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chart-container {
  text-align: center;
  padding: 20px 0;
}

.pie-chart {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 auto;
  border-radius: 50%;
  background: conic-gradient(
    #667eea 0deg 126deg,
    #43e97b 126deg 216deg,
    #f093fb 216deg 288deg,
    #4facfe 288deg 360deg
  );
}

.pie-segment {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.segment-label {
  position: absolute;
  font-size: 12px;
  font-weight: 500;
  color: #333;
}

.line-chart {
  margin-bottom: 16px;
}

.chart-label {
  color: #666;
  font-size: 14px;
  margin: 0;
}

.table-card {
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

:deep(.el-card__header) {
  padding: 20px 24px;
  border-bottom: 1px solid #f0f0f0;
}

:deep(.el-card__body) {
  padding: 24px;
}

:deep(.el-table) {
  border-radius: 8px;
}

:deep(.el-table th) {
  background-color: #f8f9fa;
  color: #333;
  font-weight: 600;
}

:deep(.el-table--enable-row-hover .el-table__body tr:hover > td) {
  background-color: #f8f9fa;
}

@media (max-width: 768px) {
  .stats-grid {
    margin-bottom: 24px;
  }
  
  .charts-grid {
    margin-bottom: 24px;
  }
  
  .stat-content {
    gap: 12px;
  }
  
  .stat-icon {
    width: 50px;
    height: 50px;
  }
  
  .stat-info h3 {
    font-size: 24px;
  }
  
  .pie-chart {
    width: 150px;
    height: 150px;
  }
}
</style> 